<!DOCTYPE html>
<html lang="en">

<head>
  <title>Mostly Fluid - Quiz</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style type="text/css">
    /*
      These are the default styles. No need to change these.
      */
    @import url(https://fonts.googleapis.com/css?family=Roboto);

    html,
    body {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: 'Roboto', sans-serif;
    }

    .title {
      font-size: 2.5em;
      text-align: center;
    }

    .box {
      min-height: 150px;
    }

    .dark_blue {
      background-color: #2A457A;
      color: #efefef;
    }

    .light_blue {
      background-color: #099DD9;
    }

    .green {
      background-color: #0C8542;
    }

    .lime {
      background-color: rgb(179, 210, 52);
    }

    .seafoam {
      background-color: rgb(77, 190, 161);
    }

    .red {
      background-color: #EC1D3B;
    }

    .orange {
      background-color: #F79420;
    }
  </style>
  <style type="text/css">
    /*
      These are the responsive styles. Throw some breakpoints in here!
      */
    .container {
      display: flex;
      flex-wrap: wrap;
      margin: auto;
    }

    .box,
    .dark_blue {
      width: 100%;
    }

    .orange {
      order: 0
    }

    .red {
      order: 1
    }


    .light_blue,
    .green {
      width: 50%;
    }

    @media screen and (min-width: 450px) {

      .red,
      .orange {
        width: 100%;
      }

    }

    @media screen and (min-width: 550px) {
      .red {
        width: 33.33333%;
      }

      .orange {
        width: 66.66666%;
      }
    }

    @media screen and (min-width: 800px) {
      .red {
        width: 33.33333%;
      }

      .orange {
        width: 66.66666%;
      }

      .light_blue {
        width: 25%;
      }

      .green {
        width: 75%;
      }

      .container {
        width: 80%;
      }
    }

    .rec {
      border: solid red;
      transform: translate(130px, 60px);
      width: 80%;
      height: 60px;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="box dark_blue"></div>
    <div class="box light_blue"></div>
    <div class="box green"></div>
    <div class="box red"></div>
    <div class="box orange"></div>
  </div>
</body>
<div class="rec">Transformed element</div>

</html>